<template>
  <div class="product">
    <!-- 顶部 -->
    <van-sticky>
      <van-nav-bar>
        <van-icon name="arrow-left" slot="left" size="20" class="icon-tl" @click="goBack" />
        <van-icon name="cart-o" slot="right" size="20" class="icon-tr" @click="goShopCart" />
      </van-nav-bar>
    </van-sticky>
    <!-- 轮播没图片时显示 -->
    <div class="sory_banner" v-if="bannerData.length==0">暂无图片噢</div>
    <!-- 轮播 -->
    <van-swipe :loop="false">
      <van-swipe-item v-for="item in bannerData" :key="item.id" class="swipe_item">
        <img :src="item.img_url" />
      </van-swipe-item>
    </van-swipe>
    <!-- 轮播下面的一行东西 -->
    <h6 class="goods_info">{{info.goods_brief}}</h6>
    <!-- 价格模块 -->
    <van-panel>
      <h4>
        <van-row>
          <van-col span="8">
            <span class="goods_price">{{'￥'+info.retail_price}}</span>
          </van-col>
          <van-col span="3">
            <van-tag class="tag" plain type="danger">hot</van-tag>
          </van-col>
          <van-col span="4">
            <van-tag class="tag" plain type="danger">{{info.promotion_desc}}</van-tag>
          </van-col>
          <van-col span="4" offset="5">
            <van-tag class="tag" plain type="danger">领券></van-tag>
          </van-col>
        </van-row>
        <van-row>
          <van-col>
            <p class="goods_name">{{info.name}}</p>
          </van-col>
        </van-row>
      </h4>
    </van-panel>
    <!-- 选择模块 -->
    <van-cell-group class="cell_group">
      <van-cell title="服务" is-link />
      <van-cell title="规格" is-link @click="skuShow=true" />
      <van-cell title="参数" is-link @click="canshuBox=true" />
    </van-cell-group>

    <!-- 详情 -->
    <van-panel title="详情" class="xiangqing_title">
      <div v-html="info.goods_desc" class="xiangqing_body"></div>
    </van-panel>

    <!-- 底部固定导航 -->
    <van-goods-action :safe-area-inset-bottom="true" class="goods-action">
      <van-goods-action-icon icon="chat-o" text="客服" color="#07c160" />
      <van-goods-action-icon icon="cart-o" text="购物车" />
      <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
      <van-goods-action-button type="warning" text="加入购物车" />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>

    <!-- 商品参数弹出层 -->
    <van-popup v-model="canshuBox" position="bottom" :style="{ height: '50%' }">
      <van-panel title="商品参数" class="canshu_title">
        <van-row v-for="(item,index) in goodsAttribute" :key="index">
          <h5 class="canshu_name">{{item.name}}</h5>
          <p class="canshu_value">{{item.value}}</p>
        </van-row>
      </van-panel>
    </van-popup>
    <!-- 商品规格弹出层 -->
    <van-sku
      v-model="skuShow"
      :sku="sku"
      :goods="goods"
      @buy-clicked="onBuyClicked"
      @add-cart="onAddCartClicked"
    />
  </div>
</template>
<script>
// 导入网络封装模块
import { request } from "@/axios/request";
let sku = {
  // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
  // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
  tree: [
    {
      k: "颜色", // skuKeyName：规格类目名称
      v: [
        {
          id: "1", // skuValueId：规格值 id
          name: "红色" // skuValueName：规格值名称
        },
        {
          id: "2",
          name: "蓝色"
        },
        {
          id: "3",
          name:"绿色"
        },
      ],
      k_s: "s1" // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
    },
    
    
  ],
  list: [
    {
      price: 259800, // 价格（单位分）
      s1: "1", // 规格类目 k_s 为 s1 的对应规格值 id
      stock_num: 110 // 当前 sku 组合对应的库存
    },
    {
      price: 259800, // 价格（单位分）
      s1: "2", // 规格类目 k_s 为 s1 的对应规格值 id
      stock_num: 1100 // 当前 sku 组合对应的库存
    },
    {
      price: 259800, // 价格（单位分）
      s1: "3", // 规格类目 k_s 为 s1 的对应规格值 id
      stock_num: 11000 // 当前 sku 组合对应的库存
    },
    
    
  ],
  price: "0", // 默认价格（单位元）
  stock_num: 0 // 商品总库存
};
let goods = {
  // 默认商品 sku 缩略图
  picture: "https://img.yzcdn.cn/1.jpg"
};
export default {
  name: "product",
  data() {
    return {
      bannerData: [],
      info: "",
      goodsAttribute: [],
      canshuBox: false,
      skuShow: false,
      sku,
      goods
    };
  },
  methods: {
    goBack() {
      this.$router.go(-1);
      // console.log()
    },
    goShopCart() {
      this.$router.replace("/shopcart");
    },
    onBuyClicked() {
      console.log("立即购买");
    },
    onAddCartClicked() {
      console.log("添加购物车成功");
    }
  },
  created() {
    request({
      url: "goods/detail",
      params: { id: this.$route.params.id }
    }).then(res => {
      console.log(res);
      this.bannerData = res.data.gallery;
      this.info = res.data.info;
      this.goodsAttribute = res.data.attribute;
      // sku
      this.goods.picture = this.info.primary_pic_url;
      this.goods.title = this.info.name;
      this.sku.price = this.info.retail_price + ".00";
      this.sku.stock_num = this.info.goods_number;
    });
  }
};
</script>
<style lang="less" scoped>
.product {
  margin-bottom: 50px;
}
.van-nav-bar,
.van-nav-bar__title {
  height: 40px;
}
.icon-tl,
.icon-tr {
  margin-top: 4px;
}
.swipe_item > img {
  width: 100%;
  height: 100%;
  vertical-align: top;
}
.goods_info {
  margin: 0;
  text-align: center;
  background-color: #999;
  color: aliceblue;
}
.sory_banner {
  height: 320px;
  text-align: center;
  line-height: 320px;
}
.product h4 {
  margin: 5px 0;
  .goods_price {
    color: red;
    font-size: 24px;
  }
  .tag {
    margin-top: 6px;
  }
}
.goods_name {
  margin: 5px 0;
}
.van-cell {
  padding: 3px 5px;
  font-size: 12px;
  color: #999;
}
.van-cell-group {
  margin-bottom: 5px;
}
.xiangqing_title {
  text-align: center;
}
.canshu_title {
  text-align: center;
  p {
    font-size: 12px;
    width: 100%;
  }
}
.canshu_name {
  margin-bottom: 2px;
}
.canshu_value {
  margin-top: 0;
}
.goods-action {
  z-index: 2;
}
</style>